<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>点我呀</h1>

    <script>


        // 函数的第一种语法：具名函数
        // function name() {}


        // 数据类型
        //    基本数据类型  number  string boolean  null undefined
        //    复杂数据类型  函数  ....


        // 函数的第二种语法
        //    赋值式函数  --- 把一个函数赋值给一个变量   这个变量就是函数的名字
        //    注意：必须先声明后调用  ***************************


        // 函数的第三种语法
        //    匿名函数的自调用


        // 函数的第四种语法
        //    事件驱动型函数  --- 给标签绑定事件     obj.onclick = function(){}


        // a();
        // var a = function () {
        //     console.log(666);
        // }

        // a = 1;

        // console.log(a);

        // a();    // 报错




        // 匿名函数的一次性调用   --- 匿名函数的自调用
        // 函数就是工具，工具也有一次性的  
        // 函数的特点之二封装性：把实现一个功能的代码封装在一起 ， 实现这个功能所用到的变量都会变成局部变量  --- 局部变量是临时的，函数执行完毕这些变量会被销毁
        // (function (n) {
        //     console.log(n);
        // })(999)



        // 
        // (function () {
        //     for (var i = 1; i <= 9; i++) {
        //         for (var j = 1; j <= i; j++) {

        //         }
        //     }
        // })()


        // ~ ! + - ()
        // !function () {
        //     console.log(777);
        // }()



        function f() {
            console.log(888);
        }

        // 变量b 和  函数f  指向的都是函数
        var b = f;
        b();



        var oH1 = document.querySelector('h1');
        // 绑定点击事件
        oH1.onclick = function () {     // 这个函数会在点击的时候被调用
            // 点击要做的事情
            var color = randColor();

            oH1.style.color = color;
        }



        function randColor() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }


    </script>

</body>

</html>